<template>
  <div class="search-popup">
    <van-search
      v-model="SearchValue"
      show-action
      shape="round"
      background="#cccccc"
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <!-- 下面这里是搜索栏的3个组件，通过 blockShow 的值来进行更换 -->
    <HistoryHot
      v-if="blockShow === 1"
      :historyListData="historyListData"
      :hotKeywordListData="hotKeywordListData"
      @tagClick='tagClick'>
    </HistoryHot>
    <SearchTipList
      v-if="blockShow === 2"
      :searchTipsListData="searchTipsListData"
      @cellClick='tagClick'>
    </SearchTipList>
    <SearchProducts
      v-if="blockShow === 3"
      :filterCategory="filterCategory"
      :goodsList="goodsList"
      @categoryChange='categoryChange'
      @priceChange='priceChange'>
    </SearchProducts>
    <!-- @categoryChange='categoryChange'
      @categoryChange 是子组件里 this.$emit() 定义的方法
      ='categoryChange' 是父组件里自定义的方法(为了方便所以重名)

      @priceChange 同上
    -->
  </div>
</template>

<script>
import HistoryHot from '@/components/HistoryHot.vue' // 引入 "历史热门" 组件
import SearchTipList from '@/components/SearchTipList.vue' // 引入 "搜索提示列表" 组件
import SearchProducts from '@/components/SearchProducts.vue' // 引入 "产品内容展示" 组件
import { GetSearchPopupData, GetSearchTipListData, GetGoodsListData } from '@/utils/api.js' // 引入请求 api 接口
export default {
  name: 'SearchPopup',
  components: {
    HistoryHot, // 注册 "历史热词" 组件
    SearchTipList, // 注册 "搜索提示列表" 组件
    SearchProducts // 注册 "产品内容展示" 组件
  },
  props: {},
  data () {
    return {
      // *搜索的文字，用户输入的文本
      SearchValue: '',
      // *占位符文本(未输入文本前显示的 placeholder)
      placeholderVal: '',
      // ? blockShow 的值可为1/2/3
      // *  1. 表示展示历史记录和热门搜索
      // *  2. 表示展示搜索提示的列表
      // *  3. 表示展示搜索的产品的内容
      blockShow: 1,
      // *历史记录 列表数据，需要传递给 HistoryHot 子组件
      historyListData: [],
      // *热门搜索 列表数据，需要传递给 HistoryHot 子组件
      hotKeywordListData: [],
      // *搜索实时提示 列表数据，需要传递给 SearchTipList 子组件
      searchTipsListData: [],
      // *搜索产品内容的分类数据，需要传递给 SearchProducts 子组件
      filterCategory: [],
      // *搜索产品内容的列表数据，需要传递给 Searchproducts 子组件的 Products 子组件
      goodsList: [],
      // *价格排序：(由高到低或者由低到高)，需要 SearchProducts 子组件传递参数
      order: 'desc',
      // *分类id，需要 SearchProducts 子组件传递参数
      categoryId: 0,
      // *默认的搜索方式(id/price)，需要 SearchProducts 子组件传递
      sort: 'id'
    }
  },
  computed: {},
  created () {
    GetSearchPopupData().then(response => { // 获取弹出框 SearchPopup 数据
      console.log(response)
      if (response.errno === 0) {
        this.placeholderVal = response.data.defaultKeyword.keyword // 搜索栏赋值关键词
        this.historyListData = response.data.historyKeywordList // 历史记录赋值
        this.hotKeywordListData = response.data.hotKeywordList // 热门搜索赋值
      }
    }).catch(error => {
      console.log(error)
    })
  },
  mounted () {},
  watch: {},
  methods: {
    onSearch (value) { // onSearch 在用户点击回车的时候执行，val 为用户搜索输入的值
      // console.log(value)
      this.blockShow = 3 // 显示商品内容列表
      // 获取商品列表数据
      GetGoodsListData({
        keyword: value,
        page: 1,
        size: 10,
        order: this.order, // 子传父参数
        categoryId: this.categoryId, // 子传父参数
        sort: this.sort // 子传父参数
      }).then(response => {
        if (response.errno === 0) {
          console.log(response)
          // * 常规写法
          // this.filterCategory = response.data.filterCategory // 产品内容的分类数据赋值
          // this.goodsList = response.data.goodsList // 产品内容数据列表赋值
          // * ES6 解构写法
          const { filterCategory, goodsList } = response.data
          // this.filterCategory = filterCategory 对filterCategory做修改
          this.goodsList = goodsList

          // ? 如何快速修改某个数组中一个或多个对象的属性名(小技巧)：解决返回数据字段名和固定组件属性名不同
          // *  -先进行深拷贝，再做替换(example)
          // JSON.parse(JSON.stringify(data)
          //  .replace(/name/g, 'new_name1').replace(/name2/g, 'new_name2').replace(/name/g, 'new_name3')...)
          const newArr = JSON.parse(JSON.stringify(filterCategory)
            .replace(/name/g, 'text').replace(/id/g, 'value'))
          this.filterCategory = newArr
        }
      }).catch(error => {
        console.log(error)
      })
    },
    onCancel () { // onCancel 在点击取消的时候执行
      // $router.go(-1) 为返回上一次的路由
      this.$router.go(-1)
      // 将 store.isShowPopupShadow 变为 false
      this.$store.commit('isShowPopupShadowChange', false)
    },
    onInput (value) { // onInput 在输入文本发生变化的时候执行，val 为用户搜索输入的值
      this.blockShow = 2
      GetSearchTipListData({ keyword: value }).then(response => {
        if (response.errno === 0) {
          this.searchTipsListData = response.data // 搜索实时提示赋值
        }
      }).catch(error => {
        console.log(error)
      })
    },
    categoryChange (value) { // SearchProducts 分类进行改变的时候执行
      this.categoryId = value // 修改传入的分类id
      this.onSearch(this.SearchValue) // 传入之前输入的搜索文本 this.SearchValue
    },
    priceChange (value) { // SearchProducts 价格排序进行改变的时候执行
      this.order = value // 修改传入的价格排序order
      this.sort = 'price' // 修改搜索的排序为 price (默认为 id)
      this.onSearch(this.SearchValue) // 传入之前输入的搜索文本 this.SearchValue
    },
    tagClick (value) { // HistoryHot 点击历史搜索/搜索热词 tag 的时候执行
      this.SearchValue = value // 修改搜索文本 this.Searchval
      this.onSearch(value) // 传入新的搜索文本 value
    }
    // ? 由于 cellClick (value) 和 tagClick 进行的操作完全一致，即重用即可
    // cellClick (value) { // SearchTipList 点击搜索提示的时候执行
    //   this.SearchValue = value // 修改搜索文本 this.Searchval
    //   this.onSearch(value) // 传入新的搜索文本 value
    // }
  }
}
</script>

<style lang='less' scope>
.search-popup{
  z-index: 99;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #c0c0c0;
}
</style>
